<template>
<div class="w-full h-full bg-white flex">
    <div>
      <el-input @input="setColorPrimaryHandler" v-model="colorPrimary"></el-input>
      <el-button @click="setColorPrimaryHandler" type="primary">计算</el-button>
    </div>

   <div  v-for="item in colors" class="w-52 h-52 flex flex-col ml-2.5">
     <div class="w-full">
       <el-input class="w-full" v-model="item.value" ></el-input>
     </div>
     <div class="flex-1 w-full" :style="{backgroundColor: item.color}">
     </div>
   </div>



</div>
</template>

<script setup lang="ts" name="color">
import {reactive, ref} from "vue";
import chroma from "chroma-js";
const  colorPrimary = ref("#1D4ED8")
const colors = ref([
  {
    value: 1,
    color: '#000000'
  },
  {
    value: 2,
    color: '#000000'
  },
  {
    value: 3,
    color: '#000000'
  },
  {
    value: 4,
    color: '#000000'
  },
  {
    value: 5,
    color: '#000000'
  },

])
const setColorPrimaryHandler = () => {
  colors.value.forEach((item)=>{
    let v = chroma.scale([colorPrimary.value, '#E8F3FF']).domain([0,5])
    item.color = v(item.value).hex()
  })
}

</script>

<style scoped>

</style>